import React from 'react';
import {  useSelector } from 'react-redux'
import {Breadcrumb} from 'antd'
import {HomeOutlined} from '@ant-design/icons'
import { getText } from '../utils/tools';

interface Props {}

function MyBread(props:Props) {

    //取出store中的keyPath
    var keyPath = useSelector((state:any)=>state.keyPath);
    
    return (
        <div className='my-bread' style={{paddingBottom:20}}>
              <Breadcrumb>
                <Breadcrumb.Item href="">
                    <HomeOutlined /> 首页
                </Breadcrumb.Item>
                {
                    keyPath.reverse().map((item:any,index:any)=>{
                        return (
                            <Breadcrumb.Item key={index}>
                                <span> { getText(item) } </span>
                            </Breadcrumb.Item>
                        )
                    })
                }
                
            </Breadcrumb>
        </div>
    );
}

export default MyBread;